<template>
  <div>
    <el-dialog :title="'给'+billingData.customerName+'开单'" :visible.sync="modalShow" width="60%" :before-close="modalClose" center>
      <el-container>
        <el-aside width="195x">
          <LeftClassification :tabs-text="tabsText" @classificationClist="getClassificationId" @tabsVales="handleTabs" />
        </el-aside>
        <el-main>
          <div v-show="tabsBool">
            <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%" @selection-change="handlechange1">
              <el-table-column label="套餐名称" prop="name" align="center" />
              <el-table-column prop="productClassification" label="套餐分类" align="center" />
              <el-table-column prop="projectDuration" label="日期限制" align="center" show-overflow-tooltip />
              <el-table-column prop="stopData" label="起止日期" width="220" align="center" />
              <el-table-column prop="price" label="套餐价格" align="center" show-overflow-tooltip />
              <el-table-column
                type="selection"
                label="操作"
                align="center"
                width="55"
              />
            </el-table>
          </div>
          <div v-show="!tabsBool">
            <el-table ref="multipleTable" :data="tableData2" style="width: 100%" @selection-change="handlechange2">
              <el-table-column label="套餐名称" prop="name" align="center" />
              <el-table-column prop="productClassification" label="套餐分类" align="center" />
              <el-table-column prop="projectDuration" label="日期限制" align="center" show-overflow-tooltip />
              <el-table-column prop="stopData" label="起止日期" width="220" align="center" />
              <el-table-column prop="price" label="套餐价格" align="center" show-overflow-tooltip />
              <el-table-column prop="operation" align="center" type="selection" />
            </el-table>

          </div>
          <div>
            <div v-if="selectTableData1.length>0">
              项目清单：
              <ul v-for="(item,i) of selectTableData1" :key="i">
                <li>
                  <span>项目：<span>{{ item.name }}</span></span>
                </li>
                <li>
                  <span>售价：￥{{ item.price }} <i>不打折</i></span>
                  <el-input-number v-model="item.contentCount" :min="1" :max="10" label="描述文字" @change="handleChangeNum" />
                </li>
              </ul>
              <!-- <div class="money">
                <div>
                  会员折扣
                  <el-input-number v-model="numb" controls-position="right" :min="0" :max="1" :step="0.01" @change="handleChanges" />
                </div>
                <div>
                  合计：
                  <span>￥{{ $store.state.billing.allPrice1 }}</span>
                </div>
              </div> -->
            </div>
            <div v-if="selectTableData2.length>0">
              产品清单：
              <ul v-for="(item,i) of selectTableData2" :key="i">
                <li>
                  <span>产品：<span>{{ item.name }}</span></span>
                </li>
                <li>
                  <span>单价：￥ {{ item.price }}<i>不打折</i></span>
                  <el-input-number v-model="item.contentCount" :min="1" :max="10" label="描述文字" @change="handleChangeNum" />
                </li>
              </ul>
            </div>
            <div class="money">
              <div>
                会员折扣
                <el-input-number v-model="numb" controls-position="right" :min="0" :max="1" :step="0.01" @change="handleChanges" />
              </div>
              <div>
                合计：
                <span>￥{{ $store.state.billing.allPrice1 }}</span>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
      <!-- <el-tabs v-model="activeName">
        <el-tab-pane label="项目" name="first">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="套餐" prop="oneDemand">
              <el-select v-model="ruleForm.oneDemand" placeholder="请选择">
                <el-option v-for="(item,i) of ruleForm.regions" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="towDemand">
              <el-select v-model="ruleForm.towDemand" placeholder="请选择">
                <el-option v-for="(item,i) of ruleForm.regions" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="threeDemand">
              <el-select v-model="ruleForm.threeDemand" placeholder="请选择">
                <el-option v-for="(item,i) of ruleForm.regions" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%" @selection-change="handlechange1">
            <el-table-column label="套餐名称" prop="name" align="center" />
            <el-table-column prop="productClassification" label="套餐分类" align="center" />
            <el-table-column prop="projectDuration" label="日期限制" align="center" show-overflow-tooltip />
            <el-table-column prop="stopData" label="起止日期" width="220" align="center" />
            <el-table-column prop="price" label="套餐价格" align="center" show-overflow-tooltip />
            <el-table-column
              type="selection"
              label="操作"
              align="center"
              width="55"
            />
          </el-table>
          <div v-if="selectTableData1.length>0">
            项目清单：
            <ul v-for="(item,i) of selectTableData1" :key="i">
              <li>
                <span>项目：<span>{{ item.name }}</span></span>
              </li>
              <li>
                <span>售价：￥{{ item.price }} <i>不打折</i></span>
                <el-input-number v-model="item.contentCount" :min="1" :max="10" label="描述文字" @change="handleChangeNum" />
              </li>
            </ul>
            <div class="money">
              <div>
                会员折扣
                <el-input-number v-model="numb" controls-position="right" :min="0" :max="1" :step="0.01" @change="handleChanges" />
              </div>
              <div>
                合计：
                <span>￥{{ $store.state.billing.allPrice1 }}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="产品" name="second">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="套餐" prop="oneDemand">
              <el-select v-model="ruleForm.oneDemand" placeholder="请选择">
                <el-option v-for="(item,i) of ruleForm.regions" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="towDemand">
              <el-select v-model="ruleForm.towDemand" placeholder="请选择">
                <el-option v-for="(item,i) of ruleForm.regions" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="threeDemand">
              <el-select v-model="ruleForm.threeDemand" placeholder="请选择">
                <el-option v-for="(item,i) of ruleForm.regions" :key="i" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table ref="multipleTable" :data="tableData1" style="width: 100%" @selection-change="handlechange1">
            <el-table-column label="套餐名称" prop="name" align="center" />
            <el-table-column prop="productClassification" label="套餐分类" align="center" />
            <el-table-column prop="projectDuration" label="日期限制" align="center" show-overflow-tooltip />
            <el-table-column prop="stopData" label="起止日期" width="220" align="center" />
            <el-table-column prop="price" label="套餐价格" align="center" show-overflow-tooltip />
            <el-table-column prop="operation" align="center" type="selection" />
          </el-table>
          <div v-if="selectTableData1.length>0">
            产品清单：
            <ul v-for="(item,i) of selectTableData1" :key="i">
              <li>
                <span>产品：<span>名称1</span></span>
              </li>
              <li>
                <span>单价：￥3,000 <i>不打折</i></span>
                <el-input-number v-model="item.contentCount" :min="1" :max="10" label="描述文字" @change="handleChangeNum" />
              </li>
            </ul>
            <div class="money">
              <div>
                会员折扣
                <el-input-number v-model="numb" controls-position="right" :min="0" :max="1" :step="0.01" @change="handleChanges" />
              </div>
              <div>
                合计：
                <span>￥{{ $store.state.billing.allPrice1 }}</span>
              </div>
            </div> -->
      <!-- <div>
              收款类型
              <el-radio v-model="radio" label="1">全款</el-radio>
              <el-radio v-model="radio" label="2">预约金</el-radio>
            </div> -->
      <!-- </div>
        </el-tab-pane>
      </el-tabs> -->
      <!-- v-show="active==1" -->

      <!-- active==0?'已选择':'提交'  @click="next" -->
      <el-button class="checked" style="margin-top: 12px;" @click="handlerSubmit">提交</el-button>
    </el-dialog>
  </div>

</template>

<script>
import { mapMutations } from 'vuex';
import LeftClassification from "@/components/leftClassification";
export default {
  name: "Index",
  components: {
    LeftClassification,
  },
  props: {
    billingData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tabsText: [
        { label: '项目', name: 'project' },
        { label: '物品', name: 'product' },
      ],
      tabsBool: true,
      searchParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      modalShow: false,
      activeName: 'first',
      activeNames: '1',
      numb: 0.8,
      allPrice: 1, // 商品的总价
      ruleForm: {
        region: '', // 主要需求
        secondary: '', // 次要需求1
        name: '',
      },
      rules: {
        region: [// 主要需求
          { required: true, message: '请选择主要需求', trigger: 'change' },
        ],
      },
      ruleForm1: {
        region: '', // 主要需求
        secondary: '', // 次要需求1
        name: '',
      },
      tableData1: [],
      tableData2: [],
      selectTableData1: [],
      selectTableData2: [],
      multipleSelection: [],
      checked: true,
    };
  },
  // mounted() {
  // this.fetchProduct('doctor/consulting/productList');
  // },
  // watch: {
  //   modalShow:{
  //     handler(val){
  //       console.log(this,"this.$refs.ruleForm")
  //       // if(val) return this.$refs.multipleTable.clearSelection();
  //     }
  //   }
  // },
  methods: {
    handleTabs(val) {
      if (val === 'project') {
        this.tabsBool = true;
      } else {
        this.tabsBool = false;
      }
      // console.log(this.tabsBool,"tabsBool");
    },
    async getClassificationId(val) {
      // 查询提交的产品分类id
      this.searchParams.productClassificationId = val.list.join(",");
      if (this.tabsBool === true) {
        const res = await this.$api['doctor/consulting/productList']({ query: this.searchParams });
        if (res.code !== 200) return this.$message.error('查询货品列表失败！');
        console.log(res, "1111111");
        this.tableData1 = res.data.result;
        this.tableData1.forEach(item => {
          this.$set(item, 'contentCount', 1);
        });
      } else {
        const res = await this.$api['data/drugs/drugsList']({ query: this.searchParams });
        if (res.code !== 200) return this.$message.error('查询货品列表失败！');
        this.tableData2 = res.data.result;
        this.tableData2.forEach(item => {
          this.$set(item, 'contentCount', 1);
          this.$set(item, 'price', item.sellPrice);
        });
      }
    },
    ...mapMutations({
      addPriceMutations: 'billing/ADD_PRICE_MUTATIONS',
    }),
    // fetchProduct(url) {
    //   this.$api[url]({
    //     page: 1,
    //     pageSize: this.$store.state.commonsettings.maxPageSize,
    //   }).then(res => {
    //     if (res.code !== 200) return;
    //     this.tableData1 = res.data.result;
    //     this.tableData1.forEach(item => {
    //       this.$set(item, 'contentCount', 1);
    //     });
    //     console.log(this.tableData1, "billingData");
    //   });
    // },
    init() {
      this.modalShow = true;
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
      });
    },
    handlerSubmit() {
      // let arr=[];
      // arr.push(...this.selectTableData1, ...this.selectTableData2);
      // console.log(this.selectTableData1, this.selectTableData2, arr);
      this.$set(this.billingData, 'advisoryName', this.$store.getters.currentUserInfo.name);
      this.$set(this.billingData, 'orderList', [...this.selectTableData1, ...this.selectTableData2]);
      this.billingData.orderList.forEach(item => {
        this.$set(item, 'productAttrib', item.productAttributes);
        this.$set(item, 'productNo', item.no);
        this.$set(item, 'projectId', item.id);
        this.$set(item, 'projectName', item.name);
        this.$set(item, 'specl', item.specifications);
        this.$set(item, 'id', '');
      });
      // console.log(this.billingData, "this.billingData.orderList");
      this.$api['doctor/consulting/addOrder'](this.billingData).then(res => {
        if (res.code !== 200) return;
        this.$emit("close");
        this.$emit('success');
        this.$message.success('开单成功');
      });
    },
    handleChangeNum(value) {
      // console.log(value, this.selectTableData1, this.selectTableData2,"'sdjfkdjikjiofj");
      this.addPriceMutations([...this.selectTableData1, ...this.selectTableData2]);
    },
    handlechange1(val) {
      this.selectTableData1 = val;
      this.selectTableData1.forEach(item => {
        this.$set(item, 'contentType', '项目');
      });
      this.addPriceMutations([...val, ...this.selectTableData2]);
    },
    handlechange2(val) {
      this.selectTableData2 = val;
      this.selectTableData2.forEach(item => {
        this.$set(item, 'contentType', '物品');
      });
      this.addPriceMutations([...val, ...this.selectTableData1]);
    },
    handleChanges(value) {
      console.log(value);
    },
    modalClose() {
      this.modalShow = false;
    },
    handleClicks(tab, event) { // 内层弹窗的tab选项卡的事件
      console.log(tab, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped lang='scss'>
.el-form {
  display: flex;
}
.el-button {
  background: #51abab;
  border: 1px solid #51abab;
  color: #fff;
}
.el-steps {
  border-bottom: none;
}
.el-input {
  width: 150%;
}
.checked {
  margin-left: 47%;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  li {
    display: flex;
    justify-content: space-between;
    line-height: 44px;
  }
  > :nth-child(1) span span {
    color: #71c9ce;
  }
  > :nth-child(2) {
    border-bottom: 1px solid #707070;
    i {
      width: 55px;
      height: 20px;
      background: #ffffff;
      border: 1px solid #f59696;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 300;
      line-height: 14px;
      color: #ff8484;
      opacity: 0.8;
    }
  }
}
.money {
  display: flex;
  margin: 30px 0;
  justify-content: space-between;
  > :nth-child(2) {
    span {
      font-size: 18px;
      font-weight: 500;
      line-height: 14px;
      color: #ff8484;
    }
  }
}
/deep/.el-dialog__header {
  height: 56px;
  background: #71c9ce;
  opacity: 1;
  // border-radius: 16px 16px 0px 0px;
  span {
    color: #fff !important;
  }
}
</style>
